<template>
	<view class="footer">
		<view class="total-Price">
			<text class="total">合计：</text>
			<text class="Price">￥ 31.00</text>
		</view>
		<view class="but" @click="Pay">
			<text>提交订单</text>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {OrderPay} from '@/config/API/equip.js'
	const Pay = async() =>{
		const payForm = {
			openid: 'o6UAS7cVqaOL9qrOcMqNvyBh3XVA',
			order_id: 28
		}
		const res = await OrderPay(payForm)
		console.log(res);
		if (res.data) {
			await wxPay(res.data)
		} else {
			uni.showToast({
				title: '支付失败请稍后再试',
				icon: 'none'
			})
			uni.hideLoading();
		}
	}
	// wx支付
	const wxPay = (payData) =>  {
		console.log('payData0',payData);
		uni.requestPayment({
			provider: "wxpay",
			...payData,
			success: async (res) => {
				console.log(res);
				popup.value.open('center')
				uni.hideLoading();
			},
			fail: (err) => {
				console.log(err);
				// 支付失败后的操作
				// 例如，提示用户支付失败
				// popup.value.open('center')
				uni.showToast({
					title: '支付失败，请重试',
					icon: 'none'
				});
				// 隐藏加载提示
				uni.hideLoading();
			},
		});
	}
</script>

<style lang="scss" scoped>
	.footer {
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 40rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		.total-Price{
			display: flex;
			gap: 10rpx;
			align-items: center;
			text{
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
			.total{
				font-size: 28rpx;
			}
			.Price{
				font-size: 32rpx;
			}
		}
		.but {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 0 70rpx;
			border-radius: 50rpx;
			background-color: #000;
			overflow: hidden;
			text {
				width: 100%;
				text-align: center;
				color: #fff;
			}
		}
	}
</style>